<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "宋体";
        }

        .top {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 15%;
            font-size: 30px;
            color: gray;
        }

        .main {
            display: flex;
            justify-content: flex-end;
            background-color: rgb(233, 56, 84) !important;
            background-image: url(img/banner.png);
            background-position: top;
            background-repeat: no-repeat;
            background-size: 70%;
            width: 100%;
            height: 537px;
            border: 1px solid lightgrey;
            margin: 20px 0;
        }

        .footer_div {
            display: flex;
            justify-content: center;
            font-size: 14px;
            color: gray;
        }

        .footer {
            margin-top: 37px;
        }

        .main_box {
            display: flex;
            width: 340px;
            background-color: white;
            margin-right: 140px;
            flex-direction: column;
            margin-top: 55px;
            margin-bottom: 200px;
            padding: 20px;
        }
        .box1{
            display: flex;
            justify-content: space-between;
        }

        .box2{
            margin-left: -20px;
        }

        .box2 input {
            border: none;
            outline: none;
        }

        .box2_border {
            align-items: center;
            border: 1px solid grey;
            margin-left: 20px;
            background-color: white !important;
            margin-top: 20px;
        }

        .box2_border input {
            width: 190px;
            height: 37px;

        }

        .box2 img {
            margin-bottom: -12px;
            font-size: 20px;

        }

        .box3 {
            display: flex;
            justify-content: space-between;
            color: gray;
            font-size: 12px;
            margin: 10px 0;
        }

        .box4 input {
            border: none;
            width: 100%;
            height: 47px;
            font-size: 20px;
            background-color:red;
            color: white;
        }
    </style>
</head>

<body>
    <div style="width: 100%;">


        <div class="top">
            <img src="img/logo.png" alt="">
            <div>欢迎登录</div>
        </div>

        <div class="main">
            <div class="main_box">
                <div class="box1">
                    <span style="font-size: 25px; color: gray;">京东会员</span>
                    <span style="color: red;"><img src="img/icon5.jpg" alt="">立即注册</span>
                </div>
                <div class="box2">
                    <div class="box2_border">
                        <img src="img/icon1.jpg" alt="">
                        <input type="text" placeholder="邮箱/用户名/手机号" style="font-size: 16px;">
                    </div>
                </div>
                <div class="box2">
                    <div class="box2_border">
                        <img src="img/icon2.jpg" alt="">
                        <input type="text" style="font-size: 16px;">
                    </div>
                </div>

                <div class="box3">
                    <div>
                        <input type="checkbox" name="" id="">
                        自动登录
                    </div>

                    <div>
                        忘记密码？
                    </div>
                </div>

                <div class="box4">
                    <input type="button" value="登录">
                </div>

            </div>
        </div>

        <div class="footer">
            <div class="footer_div">
                关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site
            </div>
            <br>
            <div class="footer_div">
                Copyright &copy; 2004-2017 京东JD.com 版权所有
            </div>
        </div>
    </div>
</body>

</html>